<template>
	<view class="page">
		<!-- <c-nav-bar :title="titleHeader" ></c-nav-bar> -->
		<view class="pop-center">
			<view v-for="(item,index) in searchList" :key="index" class="comments">
				<view class="one-list" @longpress='TapAndHold(item,index)'>
					<view class="image">
						<!-- <image src="@/static/my/avatar.png" mode="aspectFill"></image> -->
						<image :src="item.headUrl" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view @click="TapComments(item,index)">
							<view class="center-title">
								{{item.commentatorName}}
							</view>
							<view class="center-time">
								<!-- 回复了你的{{commentsType}} {{item.createDate}} -->
								回复了你的评论 {{item.createDate}}
							</view>
							<view class="center-text">
								{{item.content}}
							</view>
							<view class="center-text1">
								<text class="text"></text> {{item.myComment}}
							</view>
						</view>
						<view class="center-Reply" @tap="discussChildren(item,index)">
							<view>
								<u-icon name="chat"></u-icon>
								回复
							</view>
						</view>
					</view>
				</view>

			</view>

			<!-- 评论删除回复弹出框 -->
			<u-popup :show="show" @close="close" :round="24" @open="open">
				<view class="pop">
					<view class="two" style="color: #FF4141;" @click="del">
						删除
					</view>
					<view class="three" @click="show=false">
						取消
					</view>
				</view>
			</u-popup>
		</view>
		<view class="pop-input-if " v-if="commit">
			<input-box :commit="commit" border="none" @submit="submit" @blur="submit"></input-box>
		</view>
		<nodata v-if="searchList.length === 0"></nodata>
		<!-- 授权手机登录 -->
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>

</template>

<script>
	import nodata from '@/compoments/NoData/index1.vue'
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import inputBox from '@/compoments/inputBox/inputBox1.vue'
	export default {
		components: {
			GetPhoneNumber,
			nodata,
			inputBox
		},
		data() {
			return {
				titleHeader: '我的评论',
				searchList: [],
				commit: false,
				show: false,
				fromData: {
					limit: 30,
					page: 1,
					type: '',
					userId: JSON.parse(uni.getStorageSync('userInfo')).id
				},
				dto: {
					commentPid: null,
					commentatorId: 0,
					commentatorName: "",
					content: "",
					count: 0,
					createDate: "",
					creator: 0,
					id: 0,
					num: 0,
					pid: 0,
					tripId: 0,
					updateDate: "",
					updater: null,
					pname: null,
					type: null,
					commId: null,
					revieweeId: null
				},
				showValues: false,
				values: '',
				commentsType: ''
			}
		},
		onLoad(option) {
			console.log(option.id);
			this.getList(option.id)

			this.$login().then(res => {
				if (res !== 0) {
					this.$refs['phoneNumber'].show = true;
				}
			})


		},
		methods: {
			// 去详情页面 
			TapComments(item, index) {
				console.log(item, index);
				if (item.type == 1) { //议事广场
					let obj = {
						id: item.commId,
						title: '议事广场'
					}
					uni.navigateTo({
						url: '/pagesService/serveDetails/serveDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (item.type == 2) { //文化休闲
					let obj = {
						id: item.commId,
						title: '文化休闲'
					}
					uni.navigateTo({
						url: '/pagesService/serveDetails/cultureDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (item.type == 3) { //文化休闲
					let obj = {
						id: item.commId,
						title: '兴趣课程'
					}
					uni.navigateTo({
						url: '/pagesService/serveDetails/interestDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (item.type == 4) { //趣味活动

					uni.navigateTo({
						url: '/pagesService/funActivity/detailActivity?id=' + item.commId
					})
				}
				if (item.type == 5) { //攻略
					uni.navigateTo({
						url: '/pages/index/waterfall/details?id=' + item.commId
					})
				}
				if (item.type == 6) { //游记
					uni.navigateTo({
						url: '/pages/index/waterfall/details?id=' + item.commId
					})
				}
				if (item.type == 7) { //新闻资讯
					uni.navigateTo({
						url: '/pagesService/news/newsDetails?id=' + item.commId
					})
				}
				if (item.type == 8) { //就诊资讯
					uni.navigateTo({
						url: '/pagesService/news/newsDetails?id=' + item.commId
					})
				}
				if (item.type == 9) { //社区互动
					let obj = {
						id: item.commId,
						title: '社区互动'
					}
					uni.navigateTo({
						url: '/pagesService/serveDetails/serveDetails2?obj=' + JSON.stringify(obj)
					})
				}
			},
			// 长按时间
			TapAndHold(item, index) {
				this.show = true
				this.item = item

			},
			// 删除
			del() {
				this.show = false
				this.showModal = true
				this.$api.get(
					`/api/introdution/delComment?commentId=${this.item.id}&publisherId=${this.item.commentatorId}&commentatorId=${this.item.commentatorId}`
				).then(res => {
					if (res.data.code == 0) {
						this.$showToast(res.data.data)
						this.getList(this.commId)
					} else this.$showModal(res.data.msg)

				})
			},
			open() {},
			close() {
				this.show = false
			},
			showVal() {
				this.showValues = false
			},
			// 评论区二级评论
			discussChildren(e, i) {
				console.log(e, i);
				this.commit = true
				this.showValues = true
				this.dto.pid = e.id // 父id
				// this.dto.commentPid = e.id //评论父id
				this.dto.commentPid = e.commentPid //评论父id
				this.dto.pname = e.commentatorName
				this.dto.revieweeId = e.creator //被评论人 id
				this.dto.type = e.type //类型
				this.dto.commId = e.commId
				this.dto.tripId = e.commId
				this.dto.publisherId = e.publisherId
				// this.dto.commid = e.id //

			},

			// 评论区评论接口调用
			submit(val) {
				if (val !== '') {
					this.dto.content = val
					this.$api.post('/api/introdution/comment',
						this.dto
					).then(res => {
						if (res.data.code == 0) {
							this.$showToast('回复成功')
							this.commit = false
							setTimeout(() => {
								this.getList(this.commId)
							}, 1000)
						}
					})
				} else {
					this.commit = false
				}
			},

			// 获取详情数据
			getList(id) {
				this.$api.get('/api/myComment/getMyComments', this.fromData)
					.then(res => {
						console.log(res, '----');
						// this.introdutionId = res.data.data.id
						this.searchList = res.data.data;
						this.searchList.forEach(item => {
							// this.commentsType = item.type
							if (item.type == 1) {
								this.commentsType = '议事广场'
							}
							if (item.type == 2) {
								this.commentsType = '文化休闲'
							}
							if (item.type == 3) {
								this.commentsType = '兴趣课程'
							}

							if (item.type == 4) {
								this.commentsType = '趣味活动'
							}
							if (item.type == 5) {
								this.commentsType = '攻略'
							}
							if (item.type == 6) {
								this.commentsType = '游记'
							}
							if (item.type == 7) {
								this.commentsType = '新闻资讯'
							}
							if (item.type == 8) {
								this.commentsType = '就诊资讯'
							}
							if (item.type == 9) {
								this.commentsType = '社区互动'
							}
						})




						// this.searchList.comments.forEach(s => s.list2 = []);
						// this.list = res.data.data.pic
						// this.likenum = res.data.data.likenum
						// this.commentnum = res.data.data.commentnum
						// this.carenum = res.data.data.carenum
						// this.picLength = res.data.data.picList.length
						// this.commentsLength = res.data.data.comments.length

						// this.dto.type = res.data.data.publisherType

						// this.likeType = res.data.data.likeType
						// this.careType = res.data.data.careType
						// // 根据逗号(,)分割字符串 
						// this.substrings = this.searchList.content.split('\n');
					})
			},

		}
	}
</script>
<style lang="less">
	.u-moreList {
		width: 60% !important;
	}

	.input-box {
		width: ;
	}

	.u-badge {
		padding: 0 !important;
		background-color: #FFFFFF !important;
		margin-left: -14rpx;
		color: #666666 !important;
		margin-top: 5rpx;
	}

	.u-input__content__field-wrapper__field {
		font-size: 24rpx;
		margin-left: 30rpx;
	}

	.u-modal__content__text {
		text-align: center !important;
	}

	.u-input__content {
		padding: 18rpx !important;
	}
</style>


<style lang="scss" scoped>
	.page {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		height: 100vh;

		// padding-top: 130rpx;
	}

	.pop-center {
		// padding: 24rpx 24rpx 190rpx;
	}

	.comments {
		border-bottom: 1rpx solid #EFEFEF;

		.one-list {
			display: flex;

			.image {
				// margin-top: -10rpx;
				margin: 20rpx;
				width: 64rpx;
				height: 64rpx;
				border-radius: 50rpx;

				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50rpx;
				}
			}

			.text {
				.center-title {
					margin-top: 26rpx;
					color: #111111;
					font-size: 28rpx;
					font-weight: bold;

				}

				.center-text {
					width: 580rpx;
					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					color: #333333;
					font-size: 28rpx;
					font-weight: Regular;
					margin: 20rpx 0;
				}

				.center-text1 {
					color: #808080;
					font-size: 28rpx;
					font-weight: Regular;
					width: 580rpx;
					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;

					display: flex;
					align-items: center;

					.text {
						display: block;
						width: 8rpx;
						height: 30rpx;
						background-color: #E6E6E6;
						margin-right: 10rpx;
						border-radius: 2rpx;

					}

				}

				.center-time {
					font-size: 24rpx;
					color: #333333;
					font-weight: Regular;
					margin-top: 10rpx;

				}

				.center-time1 {
					font-size: 28rpx;
					color: #808080;
					font-weight: Regular;
				}

				.center-Reply {
					margin: 26rpx 0 32rpx;
					// width: ;
					display: flex;
					align-items: center;
					width: 124rpx;
					height: 64rpx;
					text-align: center;
					color: #333333;
					font-size: 24rpx;
					font-weight: Regular;
					border-radius: 50rpx;
					background-color: #F4F4F5;

					:nth-child(1) {
						margin: 0 auto;
						display: flex;
						align-items: center;
					}


				}

			}
		}


	}


	.pop-input {
		margin: 0 auto;
		padding: 0 30rpx;
		background: #f5f8fa;
		width: 330rpx;
		height: 72rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		// position: relative;

		text {
			font-size: 24rpx;
			color: #AAAAAA;
		}

	}

	.pop-input-if {
		background-color: #fff;
		box-sizing: border-box;
		width: 100vw;
		height: 150rpx;
		line-height: 150rpx;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30rpx;

		.ipt {
			width: 78%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background: #eeeeee;


		}

		.btn {
			margin-left: 24rpx;
			width: 124rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background: #33AFFC;
			font-size: 28rpx;
			color: #FFFFFF;
			font-weight: Regular;
			text-align: center;
		}

	}

	.pop {
		// display: flex;
		// height: 408rpx;
		border-radius: 24rpx 24rpx 0 0;
		font-size: 32rpx;
		font-weight: 600;
		color: #111111;
		text-align: center;
		background-color: #FAFAFA;

		.one {
			padding-top: 10rpx;
			border-radius: 24rpx 24rpx 0 0;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			margin-bottom: 6rpx;
		}


		.two {
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
		}

		.three {
			margin-top: 20rpx;
			height: 140rpx;
			line-height: 100rpx;
			background-color: #fff;
		}
	}
</style>